import React from 'react';
import { Row, Button, Table } from 'antd';
import styles from '../../../common.css';
import formTableStyles from './index.less';
import { addKeyTodataSource } from '../../../../utils';
import ContentModal from './ContentModal';

export default class FormTableForStatisContent extends React.Component {
  constructor(props) {
    super(props);

    const value = this.props.value || [];
    this.state = {
      content: value,
      modalVisible: false,
      db: [],
    }
  }
  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      this.setState({
        content: nextProps.value || [],
      });
    }
  }
  triggerChange = (changedValue) => {
    const onChange = this.props.onChange;
    if(onChange) {
      onChange(changedValue);
    }
  };

  handleToAdd = () => {
    this.setState({
      modalVisible: true,
    });
    this.props.dispatch({
      type: 'modelConfig/fetchDbForStatisContent',
      payload: {
        cb: (db) => {
          this.setState({
            db,
          });
        },
      },
    });
  };
  handleAdd = (record, cb) => {
    const tempContent = this.state.content.slice(0); // 从零开始复制item
    tempContent.push(record);
    this.setState({
      content: tempContent,
      modalVisible: false,
    });
    if (cb) cb();
    this.triggerChange(tempContent);
  };
  handleDelete = (index) => {
    const tempContent = this.state.content.slice(0); // 从零开始复制item
    tempContent.splice(index, 1);
    this.setState({
      content: tempContent,
      modalVisible: false,
    });
    this.triggerChange(tempContent);
  };
  render() {
    const { loading } = this.props;
    const { content, modalVisible, db } = this.state;
    const columns = [
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        width: 80,
      },
      {
        title: '指标项名称',
        dataIndex: 'name',
        key: 'name',
        width: 100,
      },
      {
        title: '内容',
        dataIndex: 'content',
        key: 'content',
        width: 250,
        render: (text, record) => {
          const { type, esQuery, dbName, sql } = record;
          if (type === 'es') {
            return (
              <div>
                <li type="none" key="0">
                  <span>ES查询表达式</span>
                  {' : '}
                  <span style={{ color: '#008bab' }}>
                    {esQuery}
                  </span>
                </li>
              </div>
            );
          } else {
            return (
              <div>
                <li type="none" key="0">
                  <span>DbName</span>
                  {' : '}
                  <span style={{ color: '#008bab' }}>
                    {dbName}
                  </span>
                </li>
                <li type="none" key="1">
                  <span>SQL</span>
                  {' : '}
                  <span style={{ color: '#008bab' }}>
                    {sql}
                  </span>
                </li>
              </div>
            );
          }
        },
      },
      {
        title: '操作',
        width: 70,
        render: (text, record, index) => {
          return (
            <div className={styles.operation}>
              <a onClick={() => this.handleDelete(index)}>删除</a>
            </div>
          );
        },
      },
    ];
    const modalProps = {
      loading,
      db,
      visible: modalVisible,
      handleAdd: this.handleAdd,
      handleCancel: () => {
        this.setState({
          modalVisible: false,
        });
      },
    };
    const dataSource = addKeyTodataSource(content);
    return (
      <div className={formTableStyles.wrapper}>
        <Row style={{ marginBottom: 8 }}>
          <div className={styles.btnGroup}>
            <Button size="small" type="primary" onClick={this.handleToAdd}>添加</Button>
          </div>
        </Row>
        <Table
          size="small"
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          pagination={false}
          bordered
          scroll={{ y: 240 }}
        />
        <ContentModal {...modalProps} />
      </div>
    );
  }
}
